<template>
	<view>
		<view class="search">
			<view class="search_ipt flex alignC">
				<u-icon name="search" size="30" color="#BFBFBF" style="margin: 0 20rpx;"></u-icon>
				<u-input v-model="categoryTitleParam" placeholder="搜索医生、病症" style="width: 100%;" />
			</view>
			<view class="search_btn flex fcenter" @tap="gotoSearch">搜索</view>
		</view>
		<u-tabs :list="deptList" name="label" gutter="16" :current="current" @change="changeTabs" bar-height="8"
			bar-width="40" active-color="#3FBEBB" inactive-color="#686868"></u-tabs>
		<view class="card_list" v-if="list.length">
			<view class="card_item flex" v-for="(item, index) in list" :key="item.subjectCode">
				<!-- uploadType:1  视频链接，展示视频封面 -->
				<view v-if="item.uploadType == 1" class="right">
					<image :src="item.videoCover[0].url" mode=""></image>
				</view>
				<view v-else class="right">
					<video :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" v-if="item.videoUrl"
						:show-center-play-btn="false" :src="item.videoUrl"></video>
				</view>
				<view class="left flex fjb flexColumn">
					<view>
						<view class="title">{{ item.topicTitle }}</view>
						<view class="username">{{ item.doctorName }}</view>
					</view>
					<view class="flex fjb alignC">
						<view class="cate">类别：{{item.categoryName}}</view>
						<view class="viewBtn flex fcenter" @click="toVideoDetail(item.subjectCode)">立即查看</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty_box" v-else>
			<image src="/static/empty.png" mode=""></image>
			<text>暂无内容</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getCateVideoListApi,
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		findDictsApi
	} from '@/common/api/user.js'
	import {
		getDictListApi
	} from '@/common/api/dictApi.js'
	export default {
		data() {
			return {
				deptList: [],
				current: 0,
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				isShow: false,
				categoryCode: '',
				uploadClassify: '',
				dictObj: {},
				categoryTitleParam: ''
			}
		},
		computed: {
			...mapState('user', ['ylProjectCode', 'ylToken', 'ylUserInfo', 'ylEnterprise']),
		},
		onLoad() {
			this.getdeptList()
			this.getDicts()
		},
		async onShow() {
			this.list = []
			this.total = 0
			this.isShow = false
			this.pageNum = 1
			await this.getDictObj('科普视频')
			await this.changeTabs(0)
		},
		async onPullDownRefresh() {

		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			await this.listByPage()
		},
		methods: {
			gotoSearch() {
				this.list = []
				this.isShow = false
				this.pageNum = 1
				//发起请求
				this.listByPage()
			},
			async listByPage() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryCode: this.categoryCode,
					uploadClassify: this.dictObj[0].dictKey,
					doctorName: '',
					topicTitle: '',
					categoryTitleParam: this.categoryTitleParam
				}
				const res = await getCateVideoListApi(params)
				if (res.status == 200) {
					this.list.push(...res.data.records)
					if (this.list.length > 0) {
						this.isShow = true
					}
					this.total = res.data.total

				}
			},
			// 获取视频分类的dictValue
			async getDictObj(name) {
				let res = await getDictListApi('videoType')
				console.log(res)
				if (res.status == 200) {
					let dictList = res.data[0].dictList
					this.dictObj = dictList.filter(item => item.dictValue == name)
				}
			},
			// 科室分类
			async getdeptList() {
				const r = await getdeptListApi(16)
				this.deptList = r.data
				console.log(this.deptList, 'this.deptList')

				// this.categoryCode = this.deptList[0].id
			},
			// 获取视频分类
			async getDicts() {
				const res = await findDictsApi(["videoType"])
			},
			changeTabs(index) {
				this.current = index;
				// if (this.categoryCode === this.deptList[index].value) return
				this.categoryCode = this.deptList[index].value
				this.pageNum = 1
				this.list = []
				this.isShow = false
				this.listByPage()
			},
			// 跳转详情
			toVideoDetail(subjectCode) {
				wx.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?subjectCode=${subjectCode}`
				})
			},
		},
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.search {
		margin: 30rpx;
		position: relative;
		background: #F5F5F5;
		height: 62rpx;
		border-radius: 35rpx;

		.search_ipt {
			width: 85%;
			height: 100%;
		}

		.search_btn {
			width: 96rpx;
			height: 46rpx;
			background: #3FBEBB;
			color: #FFFFFF;
			font-size: 24rpx;
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			border-radius: 23rpx;
		}
	}

	.card_list {
		.card_item {
			padding: 32rpx;
			border-bottom: 1rpx solid #F8F8F8;

			.left {
				flex: 1;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.username {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: #9A9A9A;
				}

				.cate {
					font-size: 20rpx;
					color: #8F8F8F;
				}

				.viewBtn {
					width: 160rpx;
					height: 58rpx;
					background: #3FBEBB;
					color: #fff;
					font-size: 24rpx;
					border-radius: 37rpx;
				}
			}

			.right {
				width: 242rpx;
				height: 180rpx;
				margin-right: 32rpx;

				image {
					border-radius: 16rpx;
					width: 100%;
					height: 100%;
				}

				video {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
		}
	}
</style>